<template>
  <div class="pagination">
    <!--
    background	是否为分页按钮添加背景色
    current-page	当前页数
    page-sizes	每页显示个数选择器的选项设置
    total	总条目数
    size-change	pageSize 改变时会触发
    current-change	currentPage 改变时会触发
    -->
    <el-pagination
      background
      :current-page="+params.current"
      :page-sizes="[5, 7, 10, 15]"
      :page-size="+params.size"
      layout="total, sizes, prev, pager, next, jumper"
      :total="+params.total"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    />
  </div>
</template>

<script>
// 封装全局组件
export default {
  name: 'Pagination',

  props: {
  //       pageIndex: 1,  第几页
  //       pageSize: 10,  每页个数
  //       totalCount: 0, 总数居条数
  //       totalPage: 0    总页数
    params: {
      type: Object,
      default: () => {}
    }
  },
  methods: {
    // 改变每页显示个数触发 value当前每页显示数量
    handleSizeChange(value) {
      this.$emit('handleSizeChange', value)
    },
    // 点击页数时触发,value当前页数
    handleCurrentChange(value) {
      this.$emit('currentPageChange', value)
    }
  }
}
</script>

<style lang="scss" scoped>
 .pagination {
  height: 50px;
 margin: 20px 0;
 text-align: center;
  .el-pagination.is-background .el-pager li{
  margin: 0 10px;
 }
}
</style>
